<template>
  <wakin-list-temp
    ref="temp"
    empty-mode="data"
    page-num-key="page"
    page-size-key="limit"
    :page-start-num="1"
    :res-data-key="['data', 'list']"
    :res-total-key="['data', 'count']"
    :res-code-key="['code']"
    :status-code="errorCode.success"
    :empty-icon="$data.icon"
    :bottom-load-text="$data.loadText"
    :show-bottom-load-text="false"
    :custom-empty="false"
    :show-load-toast="$data.showLoadToast"
    @loadData="getDatas"
    @loadStatus="loadStatus"
  >
    <!--插槽:数据列表-->
    <template #render>
      <view class="list-box">
        <!--数据卡片-->
        <view
          class="list-item"
          v-for="(item, index) of $data.list"
          :key="index"
        >
          <view class="top">
            <view class="top_left">
              <image :src="item._avatar" />
            </view>
            <view class="top_right">
              <view class="top_right--phone">
                <view>{{ item.phone }}</view>
                <view class="scoring">
                  <view
                    class="scoring_item"
                    v-for="(icon, iconIndex) in 5"
                    :key="iconIndex"
                  >
                    <up-icon
                      name="star-fill"
                      :color="
                        iconIndex < item.platformStar
                          ? BasicConfig.MainColor
                          : '#bbbbbb'
                      "
                    ></up-icon>
                  </view>
                </view>
              </view>
              <view class="top_right--date">{{ item.createdAt }}</view>
            </view>
          </view>
          <view class="content">
            {{ item.platformContent }}
          </view>
          <view class="imgs" v-if="item._imgList.length > 0">
            <view
              class="img_item"
              v-for="(img, imgIndex) of item._imgList"
              :key="imgIndex"
              @tap="previewImage(item, imgIndex)"
            >
              <image :src="img" />
            </view>
          </view>
        </view>
      </view>
    </template>
    <!--插槽:自定义空提示-->
    <template #empty>
      <!-- <view class="empty" slot="empty"> -->
      <image :src="$data.icon"></image>
      <!-- </view> -->
    </template>
  </wakin-list-temp>
</template>

<script setup>
import { getCurrentInstance, reactive, ref, toRef, toRefs, watch } from "vue";
import { getServiceCommentList as requestApi } from "@/api/Interface/comment";
import BasicConfig from "../../utils/config";
import errorCode from "../../utils/http/errorCode";
import { ImgCouponLeftGreen, ImgCouponLeftGray } from "../../utils/iconMap";
import { jumpPage } from "../../utils/route/route";
import { useImgSrc } from "../../hooks/useImg";
const Instance = getCurrentInstance();
const $vm = Instance?.appContext.config.globalProperties;
const $emit = defineEmits(["total", "clickItem"]);
const temp = ref();
const loadShow = ref(false);
const $data = reactive({
  list: [],
  loadText: {
    loadmore: "轻轻上拉",
    loading: "努力加载中",
    nomore: "没有数据了",
  },
  showLoadToast: false, // 是否显示加载中toast
  listLoad: true, // 组件数据加载状态
  icon: $vm.$ListIcon.search,
});
/** 如果list中有需要格式化或操作的字段,则进行定制化操作 */
const getDatas = (e, total, source) => {
  loadShow.value = false;
  if (e && e.length >= 0) $data.list = [...e];
  $data.list.forEach((item) => {
    const imgs = item.img?.split?.(",") ?? [];
    item._imgList = imgs.map((m) => useImgSrc(m));
    item._avatar = useImgSrc(item.avatar);
    // item.platformStar = 3;
  });
  if (source) {
    // 全部评论 好评率 有图 综合评分
    $emit(
      "total",
      source.data.all_count,
      source.data.positive_review_rate,
      source.data.have_img_num,
      source.data.comprehensive_score
    );
  }
};
/** 获取列表组件数据加载状态 */
const loadStatus = (e) => {
  $data.listLoad = e;
};
/** 连接列表通用子组件模版 */
const loadDatas = async (
  loadType = $vm.$ListLoadEnum.load,
  search,
  debounce = false,
  time = 1000
) => {
  loadShow.value = true;
  await temp.value.loadDatas({
    loadType,
    search,
    debounce,
    time,
    api: requestApi,
  });
};
/**
 * @description 返回item对象,组件类型key
 */
const details = (e) => {
  // $emit("clickItem", e);
};
const previewImage = (item, index) => {
  uni.previewImage({
    current: index,
    urls: item._imgList,
  });
};
defineExpose({
  loadDatas,
});
</script>

<style lang="scss" scoped>
.list-item {
  position: relative;
  margin-bottom: 30rpx;
  padding: 30rpx;
  .top {
    display: flex;
    align-items: center;
    &_left {
      width: 100rpx;
      height: 100rpx;
      image {
        width: 100%;
        height: 100%;
        border-radius: 100%;
      }
    }
    &_right {
      margin-left: 30rpx;
      &--phone {
        display: flex;
        align-items: center;
        font-size: 32rpx;
        .scoring {
          display: flex;
          align-items: center;
          margin-left: 20rpx;
        }
      }
      &--date {
        color: #999999;
        margin-top: 20rpx;
      }
    }
  }
  .content {
    margin: 30rpx 0;
  }
  .imgs {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    $imgWidth: calc((100vw - 60rpx - 80rpx) / 5);
    .img_item {
      width: $imgWidth;
      height: $imgWidth;
      margin-bottom: 20rpx;
      image {
        width: 100%;
        height: 100%;
      }
      &:not(:nth-of-type(5n)) {
        margin-right: 20rpx;
      }
    }
  }
}
</style>
